<template>
  <div class="columnson">
    <div class="List">
      <!-- 图片区域 -->
      <div class="myimg" v-if="myimage != ''">
        <img
          id="myone"
          :src="'data:image/png;base64,' + myimage"
          :style="{
            width: width * 0.6 * num + 'px',
            height: height * 0.6 * num + 'px',
            marginLeft: loctionleft + 'px',
            marginTop: loctiontop + 'px',
          }"
        />
          <!--显示出全部库位点 -->
          <!-- <template v-if="show"> -->
            
            <span
              v-for="(item, index) in robot"
              @click="select(item)"
              :key="index"
              id="span"
              :class="[{ active: activeItem === list }]"
              :style="{
                backgroundColor: item.type == 0 ? '#9e9e9e':item.type == 1 ? '#feed9d':item.type == 2 ? '#ff9800':'',
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                width: 20 * num  * 0.6+ 'px',
                height: 20 * num  * 0.6+ 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
              left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
              transform: 'rotate(' + item.angle* 180 / Math.PI + 'deg)',
              }"
              >{{ item.id }}</span
            >
            <span
              v-for="(item, index) in activeItems"
              :key="(index+1) *2.1"
              id="span"
              class="active"
              :style="{
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                width: 20 * num  * 0.6+ 'px',
                height: 20 * num  * 0.6+ 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
              left: ((item.x / 10.0) / 5) * 0.6 * num -(20* 0.6 * num/2)+ loctionleft + 'px',
              transform: 'rotate(' + item.angle* 180 / Math.PI + 'deg)',
              }"
              >{{ item.id }}</span
            >
            <span
              v-for="(item, index) in seveRobots"
              :key="(index+1) *2.1"
              id="span"
              class="active"
              :style="{
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                width: 20 * num  * 0.6+ 'px',
                height: 20 * num  * 0.6+ 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
              left: ((item.x / 10.0) / 5) * 0.6 * num -(20* 0.6 * num/2)+ loctionleft + 'px',
              transform: 'rotate(' + item.angle* 180 / Math.PI + 'deg)',
              }"
              >{{ item.id }}</span
            >
            <!-- <span
              v-for="(item, index) in robot"
              :key="index*0.01"
              id="span"
              :class="'active'"
              :style="{
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                width: 20 * num  * 0.6+ 'px',
                height: 20 * num  * 0.6+ 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num + loctiontop + 'px',
              left: ((item.x / 10.0) / 5) * 0.6 * num + loctionleft + 'px',
              }"
              >{{ item.id }}</span
            > -->
          
          <!-- </template> -->
          <!--没有点击事件的库位点 -->
          <!-- <template v-if="!show">
            <span
              v-for="(item, index) in robot"
              :key="index"
              id="span"
              :class="[{ active: activeItem === list }]"
              :style="{
                width: 25 * num + 'px',
                height: 25 * num + 'px',
                top:
                  (height - (item.y / 10.0 - newy * 100.0) / 5 - 1) *
                    0.6 *
                    num +
                  'px',
                left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
              }"
              >{{ item.id }}</span
            >
          </template> -->
        <!--平移按钮 -->
        <van-button @click="right" class="right"
          ><van-icon name="arrow" size="44"
        /></van-button>
        <van-button @click="left" class="left"
          ><van-icon name="arrow-left" size="44"
        /></van-button>
        <van-button @click="top" class="top"
          ><van-icon name="arrow-up" size="44"
        /></van-button>
        <van-button @click="bottom" class="bottom"
          ><van-icon name="arrow-down" size="44"
        /></van-button>
        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
        <div class="mybig">
          <van-button type="info" @click="big"
            ><i class="iconfont icon-sousuofangda" style="fontSize: 28px"></i
          ></van-button>
          <van-button type="info" @click="min"
            ><i class="iconfont icon-suoxiao" style="fontSize: 28px"></i
          ></van-button>
        </div>
      </div>
      <!-- ---------------------------------------------------------列列表属性内容 -->
      <div class="property">
        <!-- 删除库位按钮 -->
        <!-- <div class="mybutton">
          <van-button @click="change(list)">编辑列表</van-button>
        </div> -->
        <div class="zore">列属性</div>
        <div class="middle" v-if="!columnShow">
          <div class="one">
            <!-- <span>列ID:</span><span>{{ list.point_list_id }}</span> -->
          </div>
          <div class="three"><span>列包含库位列表:</span></div>
          <div class="twofour" id="sddasd">
            <!--进行新增时显示的数据 -->
            <!-- <template v-if="show != ''"> -->
              <div v-for="(item, index) in seveRobot" :key="index" class="seat">
                <span class="seatitem">{{ item }}</span>
                <div class="button">
                  <van-icon
                    name="arrow-up"
                    size="28px"
                    @click="topDown(index)"
                    color="#fff"
                  />
                  <van-icon
                    name="arrow-down"
                    size="28px"
                    @click="bottomDown(index)"
                    color="#fff"
                  />
                  <van-icon
                    name="close"
                    size="28"
                    @click="remove(index)"
                    color="#fff"
                  />
                </div>
              </div>
            <!-- </template> -->

            <!-------------------------------------------编辑的点击的那一项的数据 -->
            <template v-if="show == ''">
              <div
                v-for="(item, index) in newList.point_id"
                :key="index"
                class="seat"
              >
                <span class="seatitem">{{ item }}</span>
                <div class="button">
                  <van-icon
                    name="arrow-up"
                    size="28px"
                    @click="ListDown(index)"
                    color="#fff"
                  />
                  <van-icon
                    name="arrow-down"
                    size="28px"
                    @click="Listbotton(index)"
                    color="#fff"
                  />
                  <van-icon
                    name="close"
                    size="28"
                    @click="cancel(index)"
                    color="#fff"
                  />
                </div>
              </div>
            </template>
          </div>
          <!-- <div class="twofour" v-if="newList!=''">
            <div v-for="(item, index) in newList.point_id" :key="index">
              {{ item }}
              <div class="button">
                <van-icon
                  name="arrow-up"
                  size="28px"
                  @click="topDown(index)"
                  color="#fff"
                />
                <van-icon
                  name="arrow-down"
                  size="28px"
                  @click="bottomDown(index)"
                  color="#fff"
                />
              </div>
            </div>
          </div> -->
        </div>
        <div class="mybutton" v-if="show">
          <van-button round block type="info" @click="preserve">保存</van-button>
          <van-button round block type="info" @click="onClickLeft" >取消</van-button>
          <!-- <van-button @click="preserve">保存</van-button> -->
        </div>
        <div class="newList" v-if="newList != ''">
          <van-button round block type="info" @click="achieve" v-if="!show">完成</van-button>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Cookies from 'js-cookie'
//导入获取库位点的接口
import { gainApi } from "@/api/record";
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
//导入封装好的路线编辑数据接口
import { geteditorsApi } from "@/api/editors";
//导入封装好的列列表数据接口
import {
  addparseApi,
  deteleparseApi,
  changedApi,
  parseApi,
} from "@/api/location";
export default {
  //接收父组件中传过来的值
  props: ["list", "show", "columnShow", "newList"],
  data() {
    return {

      activeItems: [], //选中高亮的类名
      activeItem: [], //选中高亮的类名
      myimage: "", //保存地图数据
      loctionleft: 0, //左边移动的距离
      loctiontop: 0, //上下移动的距离
      width: "", //图片宽度
      height: "", //图片高度
      newx: "", //圆点x坐标
      newy: "", //圆点y轴坐标
      inif: {
        x: "", //x轴坐标
        y: "", //y轴坐标
        fused_angle: "", //角度
      },
      num: 0.5, //方大缩小的变量值
      robot: [], //记录库位点数据的变量
      seveRobots: [], // 点击保存后的数据
      seveRobot: [], // 点击保存后的数据
      newArry: [],
      newRobot:[], //删除后的新数组
      // parse:[],
    };
  },
  watch: {
    'newList.point_id'(newVal,oldVal) {
      console.log(newVal)
      if(newVal == undefined){
        this.activeItems = [];
      }else{
       let datas =[];
        for(let a=0;a<newVal.length;a++){
          this.robot.forEach( e => {
            if(newVal[a] == e.id){
              datas.push(e)
            }  
          });
          
        }
        this.activeItems = datas
      console.log( this.activeItems)
      }

      //this.activeItems
    },
    deep: true, //开启深度侦听
    immediate: true, // watch侦听操作内的函数会立刻被执行
  },
  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },
  methods: {
    onClickLeft() {
      //生成自定义事件修改父组件中的值
        this.seveRobot = [];  //清空数据
        this.seveRobots = [];  //清空数据
        this.$emit('qingkong','');

        this.$emit("chdel", false);
      //this.$emit("show", false);
    },
    remove(index) {
      this.seveRobot.splice(index,1)
      this.seveRobots.splice(index,1)
    },

    //编辑删除库位id
    async cancel(index) {
    this.newList.point_id.splice(index,1);
    },

  //进行修改库位时发送请求修改
    async achieve() {
      try{
         //发送请求
      let res = await changedApi({
        //传入你点击的那一项id
        point_list_id: this.newList.point_list_id,
        //传入删除后的数组
        point_id:  this.newList.point_id,
      });
      this.$toast.success('编辑成功')
      }catch{
          this.$toast.fail('编辑失败')
      }
    },
    //移动选中库位事件
    topDown(index) {
      if (index == 0) {
        this.$toast.fail("已经是第一项了");
        return;
      }
      //点击按钮向上移动一个位置
      this.seveRobot[index] = this.seveRobot.splice(
        index - 1,
        1,
        this.seveRobot[index]
      )[0];
      this.seveRobots[index] = this.seveRobots.splice(
        index - 1,
        1,
        this.seveRobots[index]
      )[0];
      // this.seveRobot.pop(item)
    },

    //向下移动的按钮事件
    bottomDown(index) {
      if (index === this.seveRobot.length - 1) {
        this.$toast.fail("已经是最后一项");
        return;
      }
      //点击元素向下移动一位
      this.seveRobots[index] = this.seveRobots.splice(
        index + 1,
        1,
        this.seveRobots[index]
      )[0];
      this.seveRobot[index] = this.seveRobot.splice(
        index + 1,
        1,
        this.seveRobot[index]
      )[0];
    },

  //选中这一项的向上按钮的事件
  ListDown(index){
       if (index == 0) {
        this.$toast.fail("已经是第一项了");
        return;
      }
      //点击按钮向上移动一个位置
      this.newList.point_id[index] = this.newList.point_id.splice(
        index - 1,
        1,
        this.newList.point_id[index]
      )[0];
  },
  // 选中的那一项想下的事件
  Listbotton(index){
      if (index === this.newList.point_id.length - 1) {
        this.$toast.fail("已经是最后一项");
        return;
      }
      //点击元素向下移动一位
      this.newList.point_id[index] = this.newList.point_id.splice(
        index + 1,
        1,
        this.newList.point_id[index]
      )[0];
  },

    // 获取列列表数据的方法
    // async getparse() {
    //   let res = await parseApi();
    //   //转换yaml格式数据
    //   let newres = yaml.load(res.data);
    //   //赋值给列列数组
    //   this.parse = newres;
    //   console.log(this.parse,'子组件');
    // },
    //点击保存后生成列列表
    async preserve() {
      //捕获错误
      try {
        //发送数据请求
        let res = await addparseApi({
          //传入你点击的那一项的id
          point_id: [...this.seveRobot],
        });
        // 调用父组件中的获取列列表数据的接口请求
        this.$parent.getparse();
        //提示用户新建成功
        this.$toast.success("保存成功");
        this.seveRobot = [];  //清空数据
        this.seveRobots = [];  //清空数据
        this.$emit('qingkong','')
      } catch {
        //   //提示用户保存失败
        this.$toast.fail("保存失败");
      }

      // console.log(res);
      //生成自定义事件修改show的值
      this.$emit("chdel", false);
    },

    //库位列表每一项的点击事件
    select(item) {
      if(this.show==true){
        let p = this.seveRobot.findIndex((i) => i === item.id);
        if(p === -1) {
          this.seveRobot.push(JSON.parse(JSON.stringify(item.id)));
          this.seveRobots.push(JSON.parse(JSON.stringify(item)));
        }
      }else{
        let p = this.newList.point_id.findIndex((i) => i === item.id);
        if(p === -1) {
          this.newList.point_id.push(JSON.parse(JSON.stringify(item.id)));
        }
       
      }
      
      console.log(this.seveRobot)


    },


























    //获取库位列表的方法
    async getrecord() {
      //发送请求
      let res = await gainApi();
      let newres = yaml.load(res.data);
      // console.log(newres, "测试数据");
      if (res.data.msg !== "successed" && newres !== undefined) {
        //转换成对象键值对形式
        // 定义一个数组用来解构
        let one = [];
        //将转换好的对象追加到robot数组中
        one.push(newres);
        // 把最外层的数组给解构出来
        let flattened = [].concat.apply([], one);
        //赋值给robot数组
        this.robot = flattened;
        console.log(this.robot);
      }
    },
    //---------------------------------用来获取图片数据的方法
    gain() {
       let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
     //      let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数
        //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.inif.x = res.fused_x; //保存获取到的x轴坐标
          this.inif.y = res.fused_y; //保存获取到的y轴坐标
          this.inif.fused_angle = res.fused_angle;
          // console.log(this.inif.x, this.inif.y, "坐标");
        }
      };
    },
    //右边移动
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    //放大按钮事件
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
  },
  created() {
    //发送请求获取地图信息
    this.gain();
    //调用方法获取库位点数据
    this.getrecord();
  },
};
</script>

<style lang="less" scoped>
.columnson {
  margin-top: 40px;
  .List {
    display: flex;
    .myimg {
      margin-left: 40px;
      position: relative;
      text-align: center;
      border: 2px solid black;
      overflow: hidden;
      width: 955px !important;
      height: 400px;
      display: flex;
      .right {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 40%;
        right: 38%;
        color: #1ac1c1;

        z-index: 1000;
        border: none;
      }
      .left {
        position: absolute;
        top: 40%;
        left: -35px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;

        border: none;
        z-index: 1000;
      }
      .top {
        position: absolute;
        top: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      .bottom {
        position: absolute;
        bottom: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      .mybig {
        position: fixed;
        bottom: 30px;
        right: 240px;
        .van-button {
          margin-left: 20px;
        }
      }
      #myone {
        ::v-deep .van-image__img {
        }
      }
    }
    .property {
      position: fixed;
      z-index: 3000;
      top: 90px;
      right: 0;
      height: 1000px;
      text-align: left;
      line-height: 45px;
      width: 220px;
      background-color: #12151a;
      .mybutton {
        display: flex;
        .van-button {
          border: 2px solid #1989fa;

          font-size: 22px;
          border-radius: 12px;
          width: 90px;
          background-color: #1a1c25;
          border: none !important;
          margin-top: 15px;
          margin-right: 15px;
        }
      }
      .newList {
        text-align: center;

        .van-button {
          color: #fff;
          font-size: 22px;
          border-radius: 12px;
          width: 170px;
          background-color: #1a1c25;
          border: none !important;
          margin-top: 15px;
        }
      }
      .beiji {
        color: #5f5f61;
        height: 100%;
        background-color: #181a23;
      }
      .zore {
        font-size: 24px;
        color: white;
        margin-top: 20px;
        background-color: #212430;
        border-radius: 14px 14px 0 0;
        text-align: center;
      }
      .middle {
        color: #dbdbdb;
        font-size: 20px;
        text-indent: 1em;
      }
      .four {
        font-size: 20px;
        text-indent: 2em;
        .i {
          margin: 0 10px;
        }
      }
      .twofour {
        border: 2px solid black;
        text-indent: 1em;
        height: 240px;
        overflow-x: hidden;
        overflow-y: auto;
        div {
          font-size: 20px;
        }
        ::v-deep::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background: #33333300;
      /**/
    }
    ::v-deep::-webkit-scrollbar-track {
      background: rgb(239, 239, 239, 0);
      border-radius: 2px;
    }
    ::v-deep::-webkit-scrollbar-thumb {
      background: rgba(192, 176, 33);
      border-radius: 10px;
    }
    ::v-deep::-webkit-scrollbar-thumb:hover {
      background: #33333300;
    }
    ::v-deep::-webkit-scrollbar-corner {
      background: #33333300;
    }
    ::v-deep::-webkit-scrollbar-track {
      background: #33333300;
    }
      }
    }
  }
}

// 库位点样式
#span {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  width: 22px;
  height: 22px;
  position: absolute;
  background-color: #feed9d;
  line-height: 22px;
  &.active {
    background-color: #46eefb;
  }
}

.seat {
  display: flex;
  // position: relative;
  .button {
    display: flex;
    text-align: center;
    /deep/ .van-icon{
      text-indent:0;
      margin:0 8px;
    }
    ::v-deep .van-icon:before {
      display: inline-block;
      // background-color: skyblue;
      margin-top: 10px;
      width: 30px !important;
      // background-color: #161920;
      // border: 1px solid #1983ed;
    }
  }
}
.seatitem{
  width: 40px;
  text-align: center;
    color: #fff;
}
#sddasd {
        ::-webkit-scrollbar {
          width: 5px;
          height: 10px;
          background: #33333300;
          /**/
        }
        ::-webkit-scrollbar-track {
          background: rgb(239, 239, 239, 0);
          border-radius: 2px;
        }
        ::-webkit-scrollbar-thumb {
          background: rgba(192, 176, 33);
          border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #33333300;
        }
        ::-webkit-scrollbar-corner {
          background: #33333300;
        }
       ::-webkit-scrollbar-track {
          background: #33333300;
        }
      }
</style>
